<template>
  <div class="home">
    <h1>home</h1>
    <div class="chart" id="chart"></div>
  </div>
</template>

<script>
export default {
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      const chart = this.$echarts.init(document.getElementById('chart'));
      const options = {
        title: {
          text: '111',
          textStyle: {
            color: 'red'
          }
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: [
          {
            type: 'value'
          }
        ],
        tooltip: {
          trigger: 'axis',
          position: function (pt) { // 固定 提示框在 鼠标右侧出现。
            return [pt[0] + 20, '10%']
            // 第一个参数 控制 提示框左右的位置，第二个参数控制提示框上下的位置。
            // 可以控制加减，来控制提示框距离鼠标的位置。
          },
          textStyle: {
            align: 'left'
          }
        },
        // legend:{}
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'bar',
            barMaxWidth: 30
          }
        ]
      };
      chart.setOption(options);
      window.onresize = function () {
        chart.resize()
      }
    }
  }
};
</script>

<style>
.chart {
  height: 500px;
  width: 80vw;
  margin: 50px auto;
  border: 1px solid #eee;
}
</style>
